"Full Screen Blog Section design "
Bootstrap 4.1.1 Snippet by Naveen Mandwariya

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="Blog-section-main-Nav"> <div class="center-banner-area hp1-center-banner"> <div class="center-banner"> <div class="banner-left-wrapper"> <div class="banner-text-wrapper top-bg"> <div class="banner-text-top text-center"> <h3>Lorem Ipsum is simply dummy</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <a class="btn-nav-white" href="#">See Collection</a> </div> </div> <div class="banner-image"> <div class="collection-single-box-img"> <div class="collection-right-img"> <a href="#"><img src="https://i.ibb.co/r77TrkQ/pexels-cadeau-maestro-1170412.jpg" alt="domino"> </a> </div> </div> </div> </div> <div class="banner-right-wrapper"> <div class="banner-image"> <div class="collection-single-box-img"> <div class="collection-right-img"> <a href="#"><img src="https://i.ibb.co/F7zr0DT/pexels-helena-lopes-3688761.jpg" alt="domino"> </a> </div> </div> </div> <div class="banner-text-wrapper bottom-bg"> <div class="banner-text-bottom text-center"> <h3>Lorem Ipsum is simply dummy</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> <a class="btn-nav-white" href="#">See Collection</a> </div> </div> </div> </div> </div> </section>
/*CSS BY NAVEEN MANDWARIYA */ .center-banner-area.hp1-center-banner { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 40px; } .center-banner { width: 100%; background: #333333 none repeat scroll 0 0; } .banner-left-wrapper { float: left; width: 50%; } /*CSS BY NAVEEN MANDWARIYA */ .banner-right-wrapper { float: left; width: 50%; } .top-bg { background: #F5F5F5 none repeat scroll 0 0; } .banner-text-wrapper { padding: 95px 0; } .banner-text-top { width: 80%; margin: auto; } /*CSS BY NAVEEN MANDWARIYA */ .text-center { text-align: center; } .collection-right-img img { width: 100%; } .collection-right-img { position: relative; } .collection-right-img a:before { position: absolute; top: 0; left: 0; width: 0; height: 0; content: ""; -webkit-transition: all 500ms ease-in 0s; transition: all 500ms ease-in 0s; background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0; } .collection-right-img a:after { position: absolute; right: 0; bottom: 0; width: 0; height: 0; content: ""; -webkit-transition: all 500ms ease-in 0s; transition: all 500ms ease-in 0s; background: rgba(255, 255, 255, 0.1) none repeat scroll 0 0; } /*CSS BY NAVEEN MANDWARIYA */ .collection-single-box-img:hover .collection-right-img a:before { width: 100%; height: 100%; } .collection-single-box-img:hover .collection-right-img a:after { width: 100%; height: 100%; } a.btn-nav-white { background: #ff5722; padding: 15px 40px; color: #fff; text-transform: uppercase; text-decoration: none; letter-spacing: 1px; font-size: 14px; font-weight: 600; display: inline-block; margin-top: 1rem; } .banner-left-wrapper h3 { font-size: 40px; text-transform: uppercase; font-weight: bold; padding-bottom: 1rem; } .banner-right-wrapper h3 { font-size: 40px; text-transform: uppercase; font-weight: bold; color:#fff; padding-bottom: 1rem; } .banner-right-wrapper p{ color:#fff; } /*CSS BY NAVEEN MANDWARIYA */

Related: See More


Questions / Comments: